import React, { useState } from 'react';
import { Tabs, Table, Tag } from 'antd'

const { TabPane } = Tabs
const tabList = [
    {
        title: "全部",
        key: "1",
    },
    {
        title: "拼团成功",
        key: "2",
    },
    {
        title: "组团中",
        key: "3",
    },
    {
        title: "拼团失败",
        key: "4",
    }
];

const index = () => {
    const [tabKey, setTabKey] = useState("1")

    const [tableData, setTableData] = useState({
        list: [
            {
                id: 1,
                goods_logo: "http://uniapp.b2b2c.niuteam.cn/upload/1/common/images/20200417/20200417095436158708847607770.jpg",
                goods_title: "小狗（puppy）家用除螨无线挂式充电手持吸尘器T10 Cyclone",
                goods_price: "1900.20",
                need_num: 5,


                start_time: "2020-06-04 12:32:00",
                end_time: "2020-07-04 12:32:00",
                status_title: "进行中"
            }
        ], total: 0
    })

    const columns: any = [
        {
            title: '拼团商品',
            dataIndex: '-',
            render: (text: any, record: any) => <div style={{ display: "flex", alignItems: "center" }}>
                <img src={record.goods_logo} alt="" style={{ width: "64px", height: "64px" }} />
                {record.goods_title}
            </div>,
        },
        {
            title: '开团时间',
            dataIndex: 'start_time',
            render: (text: any) => text,
            align: "center",
        },
        {
            title: '结束时间',
            dataIndex: 'end_time',
            render: (text: any) => text,
            align: "center",
        },
        {
            title: '差几人成团',
            dataIndex: 'need_num',
            render: (text: any) => text,
            align: "center",
        },

        {
            title: '拼团状态',
            width: "120px",
            dataIndex: 'status_title',
            align: "center",
            render: (text: any) => <Tag color="green">{text}</Tag>
        },
        {
            title: '操作',
            width: "160px",
            align: "center",
            render: (text: any, record: any) => (
                <>
                </>
            ),
        },
    ];
    return (
        <div>
            <Tabs activeKey={tabKey} style={{ outline: "none" }} onChange={(activeKey) => {
                setTabKey(activeKey)
            }}>

                {
                    tabList.map((item: any) =>
                        <TabPane tab={item.title} key={item.key} style={{ outline: "none" }}>
                            {
                                tabKey === item.key &&
                                <Table
                                    rowKey="id"
                                    columns={columns}
                                    dataSource={tableData.list}
                                />
                            }

                        </TabPane>
                    )
                }

            </Tabs>
        </div>
    );
};

export default index;